<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import TnForm from '@tuniao/tnui-vue3-uniapp/components/form/src/form.vue'
import TnFormItem from '@tuniao/tnui-vue3-uniapp/components/form/src/form-item.vue'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import TnRadio from '@tuniao/tnui-vue3-uniapp/components/radio/src/radio.vue'
import TnRadioGroup from '@tuniao/tnui-vue3-uniapp/components/radio/src/radio-group.vue'
import TnInput from '@tuniao/tnui-vue3-uniapp/components/input/src/input.vue'
import TnImageUpload from '@tuniao/tnui-vue3-uniapp/components/image-upload/src/image-upload.vue'
import { onLoad } from '@dcloudio/uni-app'
import type {
  FormRules,
  ImageUploadCustomCallbackFunction,
  TnFormInstance,
} from '@tuniao/tnui-vue3-uniapp'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import { FILE_URL, MP_API_URL, USER_TOKEN } from '@/api/config'
import PageContainer from '@/components/page-container/index.vue'
import circlesPost from '@/api/circlesPost.js'

const formRef = ref<TnFormInstance>()
// 导航栏的高度
const navbarHeight = ref(0)
// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}
const userToken = ref('')
const imagesList = ref([])
// 表单数据
const formData = reactive({
  circles_post_id: 0,
  publish_user_id: 0,
  images: '',
  content: '',
  type: '',
})
const formRules: FormRules = {
  content: [
    {
      required: true,
      message: '请填写内容',
      trigger: ['change', 'blur'],
    },
  ],
  type: [
    { required: true, message: '请选择举报类型', trigger: ['change', 'blur'] },
  ],
}

const uploadCallbackHandle: ImageUploadCustomCallbackFunction = (
  data: UniApp.UploadFileSuccessCallbackResult
) => {
  const resData = JSON.parse(data.data)
  console.log(resData, 'images')
  if (resData.code == 1) {
    imagesList.value.push(resData.data.file.url)
    formData.images = imagesList.value.join(',')
    console.log(formData.images, 'images2')
    return FILE_URL + resData.data.file.url
  }
}

/* 提交表单 */
const submitForm = () => {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      circlesPost
        .circlesPostReport(formData)
        .then((res) => {
          uni.showToast({
            title: res.msg
          })
          if (res.code == 1) {
            uni.navigateBack({
              delta: 1, // 默认值为1，表示返回上一级
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    } else {
      uni.showToast({
        title: '表单校验失败',
        icon: 'none',
      })
    }
  })
}
onLoad((options) => {
  if (!options?.circlesPostId) {
    uni.showModal({
      title: '提示',
      content: '参数错误',
      showCancel: false,
      success: () => {
        uni.navigateBack()
      },
    })
    return
  }
  formData.circles_post_id = options.circlesPostId
  formData.publish_user_id = options.publishUserId
})

onMounted(() => {
  userToken.value = uni.getStorageSync(USER_TOKEN)
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      :bottom-shadow="false"
      :placeholder="false"
      @init-finish="navbarInitFinishHandle"
    >
      投诉举报
    </TnNavbar>
    <view
      class="form-container"
      :style="{ paddingTop: `${navbarHeight + 10}px` }"
    >
      <TnForm
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="150"
        label-position="top"
      >
        <TnFormItem label="请选择举报类型" props="type">
          <TnRadioGroup v-model="formData.type" border>
            <TnRadio label="欺诈">欺诈</TnRadio>
            <TnRadio label="色情低俗">色情低俗</TnRadio>
            <TnRadio label="传播不实信息">传播不实信息</TnRadio>
            <TnRadio label="骚扰">骚扰</TnRadio>
            <TnRadio label="诽谤、抄袭">诽谤、抄袭</TnRadio>
            <TnRadio label="混淆他人投诉">混淆他人投诉</TnRadio>
            <TnRadio label="恶意营销">恶意营销</TnRadio>
            <TnRadio label="其他">其他</TnRadio>
          </TnRadioGroup>
        </TnFormItem>
        <TnFormItem label="内容" prop="content">
          <TnInput
            v-model="formData.content"
            type="textarea"
            height="300"
            :maxlength="500"
            :show-word-limit="true"
            placeholder="请填写内容"
          />
        </TnFormItem>
        <TnFormItem label="图片（最多9张）" prop="images">
          <TnImageUpload
            v-model="imagesList"
            :limit="9"
            :action="MP_API_URL + '/system.System/upload'"
            :header="{
              Authorization: userToken,
            }"
            :custom-upload-callback="uploadCallbackHandle"
          />
        </TnFormItem>
      </TnForm>
    </view>
    <view class="tn-flex-center">
      <TnButton size="xl" width="80%" shape="round" @click="submitForm">
        提 交
      </TnButton>
    </view>
  </PageContainer>
</template>

<style lang="scss" scoped>
.form-container {
  position: relative;
  width: 100%;
  padding: 30rpx;
}
</style>
